var chartLeftTopLeft = echarts.init(document.getElementById("left-top-left"));
var chartLeftTopRight = echarts.init(document.getElementById("left-top-right"));

function chartLeftTopFunc() {
  $.ajax({
    type: "get",
    url: baseUrl + "aqi/getOtherStatistic",
    success: function (data) {
      //【成功回调】
      console.log(data);
      optionChartLeftTopLeft = {
        title: {
          show: true,
          text: "全国省会城市网格覆盖率",
          textStyle: {
            color: "#fff", //'red'，字体颜色
            fontStyle: "normal", //'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
            fontWeight: "normal", //'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
            fontFamily: "sans-serif", //'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New'
            // 'Microsoft YaHei'(微软雅黑) ，文字字体
            fontSize: 14, //字体大小
            lineHeight: 14, //字体行高
          },
          textAlign: "auto", //整体（包括 text 和 subtext）的水平对齐
          textVerticalAlign: "auto", //整体（包括 text 和 subtext）的垂直对齐
          //padding:0,//[5,10] | [ 5,6, 7, 8] ,标题内边距
          left: "15%", //'5' | '5%'，title 组件离容器左侧的距离
          right: "auto", //'title 组件离容器右侧的距离
          top: "5%", //title 组件离容器上侧的距离
          bottom: "auto", //title 组件离容器下侧的距离
        },
        tooltip: {
          formatter: "{c}%",
        },
        series: [
          {
            type: "gauge",
            center: ["50%", "60%"],
            progress: {
              show: true,
              width: 10,
            },
            itemStyle: {
              color: "#63bb3a",
              shadowColor: "rgba(99,187,58,0.45)",
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
            axisLine: {
              lineStyle: {
                width: 10,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 6,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            axisLabel: {
              distance: 12,
              color: "#999",
              fontSize: 10,
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 14,
              itemStyle: {
                borderWidth: 5,
              },
            },
            detail: {
              valueAnimation: true,
              fontSize: 16,
              offsetCenter: [0, "70%"],
            },
            data: [
              {
                value: data.data.mainCapitalRate * 100,
              },
            ],
          },
        ],
      };
      optionChartLeftTopRight = {
        title: {
          show: true,
          text: "全国大城市网格覆盖率",
          textStyle: {
            color: "#fff", //'red'，字体颜色
            fontStyle: "normal", //'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
            fontWeight: "normal", //'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
            fontFamily: "sans-serif", //'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New'
            // 'Microsoft YaHei'(微软雅黑) ，文字字体
            fontSize: 14, //字体大小
            lineHeight: 14, //字体行高
          },
          textAlign: "auto", //整体（包括 text 和 subtext）的水平对齐
          textVerticalAlign: "auto", //整体（包括 text 和 subtext）的垂直对齐
          //padding:0,//[5,10] | [ 5,6, 7, 8] ,标题内边距
          left: "15%", //'5' | '5%'，title 组件离容器左侧的距离
          right: "auto", //'title 组件离容器右侧的距离
          top: "5%", //title 组件离容器上侧的距离
          bottom: "auto", //title 组件离容器下侧的距离
        },
        tooltip: {
          formatter: "{c}%",
        },
        series: [
          {
            type: "gauge",
            center: ["50%", "60%"],
            progress: {
              show: true,
              width: 10,
            },
            itemStyle: {
              color: "#f56c6c",
              shadowColor: "rgba(245,108,108,0.45)",
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
            axisLine: {
              lineStyle: {
                width: 10,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 6,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            axisLabel: {
              distance: 12,
              color: "#999",
              fontSize: 10,
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 14,
              itemStyle: {
                borderWidth: 5,
              },
            },
            detail: {
              valueAnimation: true,
              fontSize: 16,
              offsetCenter: [0, "70%"],
            },
            data: [
              {
                value: data.data.mainBigCityRate * 100,
              },
            ],
          },
        ],
      };
      chartLeftTopLeft.setOption(optionChartLeftTopLeft);
      chartLeftTopRight.setOption(optionChartLeftTopRight);
    },
    error: function (xhr, type) {
      //【失败回调】
    },
  });
}

chartLeftTopFunc();

setInterval(() => {
  chartLeftTopFunc();
}, 5000);
